<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
    <meta name="author" content="火星科技 http://mars3d.cn " />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="x5-fullscreen" content="true" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <!-- 标题及搜索关键字 -->
    <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
    <meta
      name="description"
      content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS"
    />

    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon/favicon.ico" />
    <title>外太空物 | Mars3D | 三维地图 | 火星科技 | 合肥火星科技有限公司</title>

    <!--第三方lib-->
    <script
      type="text/javascript"
      src="/lib/include-lib.js"
      libpath="/lib/"
      include="jquery,layer,toastr,echarts,jquery-range,bootstrap,bootstrap-checkbox,bootstrap-slider,font-awesome,layer,toastr,haoutil,mars3d,mars3d-space"
    ></script>

    <link href="/css/style.css" rel="stylesheet" />
    <style>
      /* 滑动轨的样式设置 */
      .slider .tooltip.top {
        margin-top: -45px;
      }
      .slider .tooltip-inner {
        font-size: 18px;
        border: #cde1de 1px solid;
      }

      .echarts_WX {
        left: 10px;
        width:345px !important;
      }

      .viewLeft_top {
        width: 308px;
        height: 322px;
      }

      .viewLeft_top:before {
          content: "";
          z-index: -1;
          width: 80%;
          height: 80%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: transparent;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
      }

      .echarts-title {
        font-size: 18px;
        font-weight: bold;
        position: relative;
      }

      .viewLeft_bottom {
        width: 308px;
        height: 455px;
      }

      /* .echarts_WX-button {
        position: absolute;
        top: -10px;
      } */


    </style>
  </head>

  <body class="dark">


    <div id="mars3dContainer" class="mars3d-container"></div>

    <!--查询条件面板-->
    <div id="viewContorUi" class="infoview">
      <table class="mars-table">
        <tr>
          <td>名称</td>
          <td>
            <input id="txtName" class="form-control" type="text" />
          </td>
        </tr>

        <tr>
          <td>系列卫星</td>
          <td>
            <select id="selXilie" class="selectpicker form-control">
              <option value="" selected="selected">无</option>
              <option value="gps">美国 GPS系统</option>
              <option value="bd">中国 北斗卫星系统</option>
              <option value="glonass">俄罗斯 格洛纳斯系统</option>
              <option value="inmarsat">国际海事卫星(Inmarsat)</option>
              <option value="landsat">地球资源卫星(Landsat)</option>
              <option value="digitalglobe">数位全球(DigitalGlobe)</option>
            </select>
          </td>
        </tr>

        <tr>
          <td>所属国家</td>
          <td>
            <select id="selCountry" class="selectpicker form-control">
              <option value="" selected="selected">全部</option>
              <option value="US">美国</option>
              <option value="CIS">俄罗斯</option>
              <option value="PRC">中国</option>
              <option value="UK">英国</option>
              <option value="FR">法国</option>
              <option value="CA">加拿大</option>
              <option value="AUS">澳大利亚</option>
              <option value="JPN">小日本</option>
              <option value="IND">印度</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>对象类型</td>
          <td>
            <select id="selType" class="selectpicker form-control">
              <option value="" selected="selected">全部</option>
              <option value="satellite">普通卫星</option>
              <option value="junk">垃圾(卫星碎片、火箭和助推器)</option>
            </select>
          </td>
        </tr>
        <tr title="雷达截面">
          <td>雷达截面</td>
          <td>
            <input id="slider-rcs" type="text" />
          </td>
        </tr>
        <tr>
          <td>发射日期</td>
          <td>
            <input id="slider-launchdate" type="text" />
          </td>
        </tr>
        <tr>
          <td>轨道周期</td>
          <td>
            <input id="slider-period" type="text" />
          </td>
        </tr>

        <tr>
          <td>轨道类型</td>
          <td>
            <select id="selGuidao" class="selectpicker form-control">
              <option value="" selected="selected">全部</option>
              <option value="low">低地球轨道</option>
              <option value="medium">中地球轨道</option>
              <option value="geosynchronous">地球同步轨道</option>
              <option value="geostationary">地球静止轨道</option>
              <option value="high">高地球轨道</option>
            </select>
          </td>
        </tr>

        <tr>
          <td>倾斜角度</td>
          <td>
            <input id="slider-inclination" type="text" />
          </td>
        </tr>
        <tr>
          <td>远地点高度</td>
          <td>
            <input id="slider-apogee" type="text" />
          </td>
        </tr>
        <tr>
          <td>近地点高度</td>
          <td>
            <input id="slider-perigee" type="text" />
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input id="btnClearQuery" type="button" class="btn btn-primary" value="重置" onclick="resetUI()" />
          </td>
        </tr>
      </table>
    </div>

    <!--卫星详情面板-->
    <div id="pointInfo" class="infoview" style="display: none">
      <input id="btnBack" type="button" class="btn btn-primary" value="返回" onclick="highlight()" />

      <table class="mars-table tb-border">
        <tr>
          <td class="nametd">名称</td>
          <td id="td_name"></td>
        </tr>
        <tr title="北美空防司令部目录号">
          <td class="nametd">目录号</td>
          <td id="td_norad"></td>
        </tr>
        <tr title="空间研委会编号">
          <td class="nametd">国际代号</td>
          <td id="td_cospar"></td>
        </tr>
        <tr>
          <td class="nametd">对象类型</td>
          <td id="td_type"></td>
        </tr>
        <tr>
          <td class="nametd">操作状态</td>
          <td id="td_status"></td>
        </tr>
        <tr>
          <td class="nametd">所有者/国家</td>
          <td id="td_country"></td>
        </tr>
        <tr>
          <td class="nametd">发射日期</td>
          <td id="td_launchDate"></td>
        </tr>
        <tr>
          <td class="nametd">发射地点</td>
          <td id="td_launchSite"></td>
        </tr>
        <tr id="viewDecay">
          <td class="nametd">衰减日期</td>
          <td id="td_decayDate"></td>
        </tr>
        <tr>
          <td class="nametd">轨道周期[分钟]</td>
          <td id="td_period"></td>
        </tr>
        <tr>
          <td class="nametd">倾角[度]</td>
          <td id="td_inclination"></td>
        </tr>
        <tr>
          <td class="nametd">远地点高度[公里]</td>
          <td id="td_apogee"></td>
        </tr>
        <tr>
          <td class="nametd">近地点高度[公里]</td>
          <td id="td_perigee"></td>
        </tr>
        <tr>
          <td class="nametd">雷达截面</td>
          <td id="td_rcs"></td>
        </tr>
        <tr>
          <td class="nametd">轨道中心</td>
          <td id="td_orbitCenter"></td>
        </tr>
        <tr>
          <td class="nametd">轨道类型</td>
          <td id="td_orbitType"></td>
        </tr>

        <tr>
          <td class="nametd">更多资料</td>
          <td>
            <a id="link_n2yo" href="" class="rc-vertical" target="_blank">N2YO...</a>
          </td>
        </tr>
      </table>
    </div>

    <!-- echarts面板 -->
    <div id="echartsPannel" class="infoview echarts_WX">
      <input type="button" id="echarts_WX-button" class="btn btn-primary echarts_WX-button" onclick="showPannel()" value="隐藏面板">
      <div id="echarts_WX-container" class="echarts_WX-container">
        <div id="echartViewLeft_top" class="viewLeft_top"></div>
        <p id="echartViewLeft_title" class="echarts-title">卫星数统计</p>
        <div id="echartViewLeft_bottom" class="viewLeft_bottom"></div>
      </div>
    </div>

    <script src="/js/common.js"></script>
    <script src="./map.js"></script>
    <script type="text/javascript">
      "use script" //开发环境建议开启严格模式

      function highlight() {
        highlightSatellite()

        $("#pointInfo").hide()
        $("#viewContorUi").show()
      }

      // Orbital altitude definitions.
      let LOW_ORBIT = 2000
      let GEOSYNCHRONOUS_ORBIT = 35786

      function initUI() {
        $("#txtName").change(function () {
          dataToselectSatellites()
        })

        $("#selXilie").change(function () {
          dataToselectSatellites()
        })
        $("#selGuidao").change(function () {
          let val = $(this).val()
          switch (val) {
            default:
              $("#slider-apogee").slider("setValue", [$("#slider-apogee").slider("getAttribute", "min"), $("#slider-apogee").slider("getAttribute", "max")])
              $("#slider-perigee").slider("setValue", [
                $("#slider-perigee").slider("getAttribute", "min"),
                $("#slider-perigee").slider("getAttribute", "max")
              ])
              $("#slider-inclination").slider("setValue", [
                $("#slider-inclination").slider("getAttribute", "min"),
                $("#slider-inclination").slider("getAttribute", "max")
              ])
              break
            case "low":
              $("#slider-apogee").slider("setValue", [$("#slider-apogee").slider("getAttribute", "min"), LOW_ORBIT])
              $("#slider-perigee").slider("setValue", [$("#slider-perigee").slider("getAttribute", "min"), LOW_ORBIT])
              break
            case "medium":
              $("#slider-apogee").slider("setValue", [LOW_ORBIT, GEOSYNCHRONOUS_ORBIT])
              $("#slider-perigee").slider("setValue", [LOW_ORBIT, GEOSYNCHRONOUS_ORBIT])
              break
            case "geosynchronous":
              $("#slider-apogee").slider("setValue", [GEOSYNCHRONOUS_ORBIT * 0.98, GEOSYNCHRONOUS_ORBIT * 1.02])
              $("#slider-perigee").slider("setValue", [GEOSYNCHRONOUS_ORBIT * 0.98, GEOSYNCHRONOUS_ORBIT * 1.02])
              break
            case "geostationary":
              $("#slider-apogee").slider("setValue", [GEOSYNCHRONOUS_ORBIT * 0.98, GEOSYNCHRONOUS_ORBIT * 1.02])
              $("#slider-perigee").slider("setValue", [GEOSYNCHRONOUS_ORBIT * 0.98, GEOSYNCHRONOUS_ORBIT * 1.02])
              $("#slider-inclination").slider("setValue", [0, 1])
              break
            case "high":
              $("#slider-apogee").slider("setValue", [GEOSYNCHRONOUS_ORBIT * 1.02, $("#slider-apogee").slider("getAttribute", "max")])
              $("#slider-perigee").slider("setValue", [GEOSYNCHRONOUS_ORBIT * 1.02, $("#slider-perigee").slider("getAttribute", "max")])
              break
          }
          dataToselectSatellites()
        })
        $("#selCountry").change(function () {
          dataToselectSatellites()
        })
        $("#selType").change(function () {
          dataToselectSatellites()
        })

        $("#slider-rcs")
          .slider({
            id: "slider-rcs-internal",
            ticks: [0, 1, 10, 50, 100, 1000],
            ticks_positions: [0, 20, 40, 60, 80, 100],
            ticks_labels: ["0", "1", "10", "50", "100", "1000"],
            range: true,
            value: [0, 1000]
          })
          .on("slideStop", function () {
            dataToselectSatellites()
          })

        $("#slider-launchdate")
          .slider({
            id: "slider-launchdate-internal",
            ticks: [1950, 1960, 1970, 1980, 1990, 2000, 2010, 2021],
            ticks_labels: ["'50", "'60", "'70", "'80", "'90", "'00", "'10", "'20"],
            range: true,
            value: [1950, 2021]
          })
          .on("slideStop", function () {
            dataToselectSatellites()
          })

        $("#slider-period")
          .slider({
            id: "slider-period-internal",
            ticks: [0, 100, 200, 1000, 10000, 60000],
            ticks_positions: [0, 20, 40, 60, 80, 100],
            ticks_labels: ["0", "100", "200", "1k", "1w", "6w"],
            range: true,
            value: [0, 60000]
          })
          .on("slideStop", function () {
            dataToselectSatellites()
          })

        $("#slider-inclination")
          .slider({
            id: "slider-inclination-internal",
            ticks: [0, 30, 60, 90, 120, 150],
            ticks_positions: [0, 20, 40, 60, 80, 100],
            ticks_labels: ["0°", "30°", "60°", "90°", "120°", "150°"],
            range: true,
            value: [0, 150]
          })
          .on("slideStop", function () {
            dataToselectSatellites()
          })

        //远地点高度
        $("#slider-apogee")
          .slider({
            id: "slider-apogee-internal",
            ticks: [0, 1000, 2000, 5000, 10000, 600000],
            ticks_positions: [0, 20, 40, 60, 80, 100],
            ticks_labels: ["0", "1km", "2km", "5km", "10km", "600km"],
            range: true,
            value: [0, 600000]
          })
          .on("slideStop", function () {
            dataToselectSatellites()
          })

        //近地点高度
        $("#slider-perigee")
          .slider({
            id: "slider-perigee-internal",
            ticks: [0, 1000, 2000, 5000, 10000, 500000],
            ticks_positions: [0, 20, 40, 60, 80, 100],
            ticks_labels: ["0", "1km", "2km", "5km", "10km", "500km"],
            range: true,
            value: [0, 500000]
          })
          .on("slideStop", function () {
            dataToselectSatellites()
          })

        // 监听echarts数据加载完毕
        eventTarget.on("loadEchartsData", (item) => {
          allCount = item.allCount

          // 饼状图
          const topDom = document.getElementById("echartViewLeft_top")
          firstChart(item.countryNumber, topDom)

          // 柱状图
          const bottomDom = document.getElementById("echartViewLeft_bottom")
          secondChart(item.yearNumber, bottomDom)
        })
      }

      let showFlag = false
      function showPannel() {
        if (!showFlag) {
          $("#echartViewLeft_top").hide()
          $("#echartViewLeft_title").hide()
          $(".echarts_WX").width("85px")
          $("#echartViewLeft_bottom").hide()
          $("#echarts_WX-button").val("显示面板")
          showFlag = true
        } else if (showFlag) {
          $("#echartViewLeft_top").show()
          $("#echartViewLeft_title").show()
          $(".echarts_WX").width("345px")
          $("#echartViewLeft_bottom").show()
          $("#echarts_WX-button").val("隐藏面板")
          showFlag = false
        }
      }

      const colorList = ["#6648FE", "#18AF92", "#0A7CE5", "#22CEEA", "#F35267", "#F68048"]
      // 配置第一个图表的数据(圆环)
      function firstChart(data, dom) {
  console.log("1")
        const arrData = []
        // ts中遍历对象，将对象中的数据，拆分成name和value对，放入数组中
        for (const [key, val] of Object.entries(data)) {
          const itemObj = {}
          itemObj.name = key
          itemObj.value = val
          arrData.push(itemObj)
        }

        console.log("2")

        // 初始化echarts
        console.log(dom)
        firstEcharts = echarts.init(dom)

        console.log("3")

        // 进行相关的配置
        const option = {
          tooltip: {
            trigger: "item",
            formatter: "{b}<br/>共{c}个&nbsp;({d}%)"
          },
          title: [
            {
              text: "总数",
              left: "49%",
              top: "44%",
              textAlign: "center",
              textBaseline: "middle",
              textStyle: {
                color: "#A4D5FF",
                fontWeight: "normal",
                fontSize: 15
              }
            },
            {
              text: allCount,
              left: "49%",
              top: "55%",
              textAlign: "center",
              textBaseline: "middle",
              textStyle: {
                color: "#FFFFFF",
                fontWeight: "normal",
                fontSize: 25
              }
            }
          ],
          series: [
            {
              name: "pie",
              type: "pie",
              radius: ["40%", "50%"],
              selectedMode: "single",
              selectedOffset: 16, // 选中是扇区偏移量
              clockwise: true,
              startAngle: 90,
              color: colorList,
              emphasis: {
                borderWidth: 0,
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.2)",
                scale: false, // 设置饼图默认的展开样式
                itemStyle: {
                  borderWidth: 3,
                  borderColor: "#ffffff"
                }
              },
              data: arrData,
              label: {
                overflow: "none",
                ellipsis: "...",
                minMargin: 10,
                alignTo: "none"
              }
            }
          ]
        }

        firstEcharts.setOption(option)

        console.log("4")
      }

      // 配置第二个图表的数据(柱状图)
      function secondChart(data, dom) {
        const yearData = []
        // 对应的卫星数组
        const weiXinData = []
        // ts中遍历对象，将对象中的数据，拆分成name和value对，放入数组中
        for (const [key, val] of Object.entries(data)) {
          yearData.push(key)
          weiXinData.push(val)
        }

        // 过滤数据，将数据中年份为NaN的数据去除
        const indexArr = yearData.filter((item) => !isNaN(item))
        // 初始化echarts
        secondEcharts = echarts.init(dom)

        const option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (params) {
              let inhtml = ""
              for (const i in params) {
                const item = params[i]
                inhtml += "<label>" + "卫星" + item.value + "</label>&nbsp;个"
              }
              return inhtml
            },
            textStyle: {
              color: "#cacaca"
            }
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: 2,
            containLabel: true
          },
          xAxis: {
            type: "value",
            axisLabel: {
              show: false
            }
          },
          yAxis: {
            type: "category",
            data: indexArr,
            axisLabel: {
              color: "#FFFFFF" // 字体颜色
            }
          },
          dataZoom: [
            {
              type: "inside",
              start: Math.ceil(((yearData.length - 12) * 100) / yearData.length), // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
              // start: 80,
              end: 100, // 数据窗口范围的结束百分比。范围是：0 ~ 100。
              yAxisIndex: 0
            },
            {
              type: "slider",
              fillerColor: "#134875",
              yAxisIndex: 0,
              width: 10,
              height: "40%",
              right: 0
            }
          ],
          series: [
            {
              name: name,
              type: "bar",
              data: weiXinData,
              barWidth: "50%",
              itemStyle: {
                color: {
                  type: "linear",
                  x: 1, // 右
                  y: 0, // 下
                  x2: 0, // 左
                  y2: 0, // 上
                  colorStops: [
                    {
                      offset: 0,
                      color: "#18AF92" // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: "#7ceef9" // 90% 处的颜色
                    }
                  ]
                }
              }
            }
          ]
        }

        secondEcharts.setOption(option)
      }

      function resetUI() {
        $("#selXilie").val("")
        $("#selCountry").val("")
        $("#selType").val("")
        $("#selGuidao").val("")

        resetSlider("#slider-rcs")
        resetSlider("#slider-launchdate")
        resetSlider("#slider-period")
        resetSlider("#slider-inclination")
        resetSlider("#slider-apogee")
        resetSlider("#slider-perigee")
        resetGraphic()
      }

      function resetSlider(name) {
        $(name).slider("setValue", [$(name).slider("getAttribute", "min"), $(name).slider("getAttribute", "max")])
      }

      // 判断卫星数据
      function dataToselectSatellites() {
        const data = {
          name: $("#txtName").val(),
          selXiLie: $("#selXilie").val(), //系列卫星
          selCountry: $("#selCountry").val(), //所属国家
          selType: $("#selType").val(), //对象类型
          sliLaunchdate: $("#slider-launchdate").slider("getValue"),
          sliPeriod: $("#slider-period").slider("getValue"),
          sliInclination: $("#slider-inclination").slider("getValue"),
          sliApogee: $("#slider-apogee").slider("getValue"),
          sliPerigee: $("#slider-perigee").slider("getValue"),
          sliRcs: $("#slider-rcs").slider("getValue")
        }

        selectSatellites(data)
      }
    </script>
  </body>
</html>
